<template>
  <div id='tmpl'>
     <div v-for="(item,index) in datalist" class="row">
        <mt-switch v-model="value[index]" class="switch"></mt-switch>
        <img :src="item.humb_path" alt="">
        <div class="inforigth">
          <h4 v-text="item.title"></h4>
          <ul>
            <li>￥{{item.sell_price}}</li>
            <li><carInputNum :initCount="item.cou" :goodsid="item.id" v-on:cardataobj="getInputNumber"></carInputNum></li>
            <li><a href="#">删除</a></li>
          </ul>
        </div>
     </div>
     <div id="total">
        <div class="desc">
            <ul>
              <li>总计(不含运费)</li>
              <li>已勾选商品{{totalcount}}件，总计：￥{{totalAmount}}元</li>
            </ul>
        </div>
        <div id="button">
            <mt-button type="danger" size="small">去结算</mt-button>
        </div>
     </div>
     {{value}}
  </div>
</template>

<script>
import {getgoodsObj,updateData} from '../../kits/localstorage.js';
import common from '../../kits/common.js';
import {Toast} from 'mint-ui';
import carInputNum from '../subcom/carInputNum.vue';
export default {
  components:{
    carInputNum
  },
  computed:{
    //1.0定义计算总件数的属性
    totalcount(){
      //计算逻辑：只需要计算出this.value数组中的ture值有多少个即可
      var trueArr = this.value.filter(function(item){return item;})
        //计算出当前选中的商品的总价格
        //计算方式：当前商品的购买数量*商品的单价（其中两个值均从this.datalist中来）
        var amount = 0;
        var total = 0;
        this.value.forEach((item,index)=>{
          //判断当前item如果为true的话，则这个商品的总价格是要计算的
          if(item){
            var count = this.datalist[index].cou;
            var price = this.datalist[index].sell_price;
            var itemAmount = count*price;
            amount += itemAmount;
            total += count;
          }
        });
        this.totalAmount = amount;
        return total;
      
    }
  },
  data () {
    return {
      totalAmount:0, //总价格
      value:[],
      datalist:{}
    };
  },
  created(){
    //调用方法获取购物车列表数据
    this.getdatalist();
  },
  methods:{
    //获取数量组件中返回的内容
    getInputNumber(resObj){
        //1.0更新localStorage中的数据
        updateData(resObj);
        //2.0更新this.datalist中的当前数量
        for(var i=0;i<this.datalist.length;i++){
            if(this.datalist[i].id == resObj.goodsid){
              if(resObj.type=="add"){
                this.datalist[i].cou = this.datalist[i]+1;
              }else{
                this.datalist[i].cou = this.datalist[i]-1;
              }
              break;
            }
          }
        
    },
    
    getdatalist(){
      //1.0从localstorage中获取到所有的商品id值
      //obj的格式：{
      //    87：4，
      //    88：1
      // }
      var obj = getgoodsObj();
      console.log(obj);
      //2.0将id值按照api的参数格式提交给api
      var idstring = '';
      for(var key in obj){
        idstring += key + ',';
      }
      idstring = idstring.substring(0,idstring.length-1);
      //3.0ajax请求这个api获取到完整的商品数据信息赋值给this.datalist
      var url = common.apidomain + '/api/goods/getshopcarlist/' + idstring;
      console.log(url);
      this.$http.get(url).then(function(res){
        //状态值判断
        if(res.body.status != 0){
            Toast('出错了');
            return;
        }
        //将localStorage中所有的商品对应的count的值赋值给message中的每个对象的cou
        res.body.message.forEach((item)=>{
          item.cou = obj[item.id];
          //为了解决一个bug所以必须在此处初始化values数组全部为false
          this.value.push(false); //这个this是异步对象，不能拿到这个this，可以改成箭头函数
        });
        this.datalist = res.body.message;

        
      })
    }
  }
}
</script>

<style lang="css" scoped>
  .row{
    padding:10px;
    border-bottom:1px solid rgba(0,0,0,0.3);
    display:flex;
    align-items:center;
  }
  .switch{
    width:52px;
    flex: 0 0 52px; /*x,y,宽度*/
  }
  img{
    flex: 0 0 75px; /*x,y,宽度*/
    height:75px;
    width:75px;
    margin:0 10px;
  }
  .inforigth{
    flex:1;
  }
  .inforigth h4{
    color:#0094ff;
  }
  .inforigth ul{
    padding:0;
    margin:10px 0;
  }
  .inforigth ul li:first-child{
    color:red;
  }
  .inforigth ul li:last-child{
    margin-left:10px;
  }
  .inforigth li{
    list-style:none;
    display: inline-block;
  }
  #total{
    height:80px;
    background-color:rgba(0,0,0,0.1);
    border-bottom:1px solid rgba(0,0,0,0.1);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 10px;
  }
  #total ul{
    padding:0;
  }
  #total li{
    list-style:none;
    font-size:14px;
    line-height:30px;
  }
</style>